<template>
  <div class="facesheet-container">
    <van-nav-bar left-arrow left-text="个人资料" @click-left="$router.back()" />
    <div class="facesheet">
      <van-cell-group inset>
        <input type="file" hidden ref="file" @change="onFileChange" />
        <van-cell title="头像：" @click="$refs.file.click()">
          <template>
            <van-image width="60" height="60" round cover :src="list.avt" />
          </template>
        </van-cell>
        <!-- 编辑头像 -->
        <van-popup
          v-model="isupdatePhotoShow"
          style="height: 100%"
          position="bottom"
        >
        </van-popup>
        <van-cell
          title="姓名:"
          :value="list.username"
          is-link
          @click="isupdateNameShow = true"
        />
        <!-- 编辑昵称 -->
        <van-popup
          v-model="isupdateNameShow"
          style="height: 100%"
          position="bottom"
        >
          <UpdateName
            v-if="isupdateNameShow"
            v-model="list.username"
            @close="isupdateNameShow = false"
          />
        </van-popup>
        <van-cell
          title="性别"
          :value="list.sex === 1 ? '女' : '男'"
          is-link
          @click="isUpdateGenderShow = true"
        />
        <!-- 编辑性别 -->
        <van-popup
          v-model="isUpdateGenderShow"
          style="height: 100%"
          position="bottom"
        >
          <UpdateGender
            v-if="isUpdateGenderShow"
            v-model="list.sex"
            @close="isUpdateGenderShow = false"
          />
        </van-popup>

        <van-field
          v-model="list.phone"
          type="number"
          label="手机号码"
          class="tel"
          placeholder="请输入手机号"
        />

        <van-cell
          title="服务区域："
          @click="isUPdateservice = true"
          v-model="list.area"
        />
        <!-- <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="服务区域"
          placeholder="请选择所在地区"
          @click="isUPdateservice = true"
        /> -->
        <van-popup v-model="isUPdateservice" round position="bottom">
          <van-cascader
            title="请选择所在地区"
            :options="options"
            @close="isUPdateservice = false"
            @finish="onFinish"
          />
        </van-popup>
        <van-field
          v-model="list.address"
          label="详细地址"
          placeholder="请输入详细地址"
        />
        <van-field
          v-model="Verification"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small">获取验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </div>
    <van-button size="large" class="btn" @click="btn()">保存</van-button>
  </div>
</template>

<script>
import request from "@/utils/request";
import UpdateName from "./update-name";
import UpdateGender from "./update-gender";
export default {
  components: {
    UpdateName,
    UpdateGender,
  },
  data() {
    return {
      list: {},
      img: "",
      isupdatePhotoShow: false, //修改头像
      isupdateNameShow: false, //修改昵称弹层
      isUpdateGenderShow: false, //修改性别
      isUPdateservice: false, //修改区域
      fieldValue: "",
      Verification: "", //验证码
      tel: "",
      options: [
        {
          text: "湖南省",
          value: "330000",
          children: [
            {
              text: "长沙市",
              value: "330100",
              children: [{ text: "雨花区", value: "331100" }],
            },
            {
              text: "株洲市",
              value: "330200",
              children: [{ text: "辖天元区", value: "332100" }],
            },
            {
              text: "衡阳市",
              value: "330300",
              children: [{ text: "蒸湘区", value: "333100" }],
            },
            {
              text: "郴州市",
              value: "330400",
              children: [{ text: "苏仙区", value: "334100" }],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      const { data } = await request({
        method: "GET",
        url: "http://192.168.33.66:3001/user",
      });
      // console.log(data);
      this.list = data;
      // console.log(this.list);
    },
    async onFileChange() {
      // 获取文件头像
      const file = this.$refs.file.files[0];
      // 基于文章对象获取blob数据
      // console.log(window.URL.createObjectURL(file));
      this.img = window.URL.createObjectURL(file);
      // console.log(this.img);/
      const { data } = await request({
        method: "PATCH",
        url: "http://192.168.33.66:3001/user",
        data: {
          avt: this.img,
        },
      });
      this.list = data;

      // 展示预览图片弹出层
      // this.isupdatePhotoShow = true;
      // file-input如果选了同一个文件不会触发change事情
      // 解决办法就是每次使用完毕，把它的value清空
      // this.$refs.file.value = "";
    },
    onFinish({ selectedOptions }) {
      // console.log(selectedOptions);
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
      this.list.area = this.fieldValue;
    },

    async btn() {
      await request({
        method: "POST",
        url: "http://192.168.33.66:3001/user",
        data: this.list,
      });
      this.$toast.success("保存成功");
    },
  },
};
</script>

<style lang="less" scoped>
.facesheet-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 100%;
  background-color: #f8f8f8;
  // .facesheet {
  //   margin-top: 15px;
  // }
  /deep/ .van-nav-bar__content {
    background-color: #3f51b5;
    .van-nav-bar__text {
      font-size: 30px;
    }
    .van-icon-arrow-left {
      color: #fff;
      font-size: 45px;
    }
  }
  /deep/ .van-cell-group--inset {
    margin: 0 0 0 0;
    .van-cell {
      display: flex;
      align-items: center;
      // padding: 21px 21px;
      color: #0a0909;
      font-size: 28px;
      height: 110px;
      border-bottom: 1px solid #f0eeee;
      font-weight: 600;
      &:first-child {
        height: 150px;
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
  /deep/ .van-button {
    background-color: #3f51b5;
    color: #fff;
    padding: 0 30px;
    font-size: 25px;
    font-weight: 600;
  }
  /deep/ .van-dropdown-menu__item {
    width: 50px;
  }
  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
  /deep/ .van-field__label {
    color: #000;
    font-weight: 600;
  }
}
</style>
